<template>
    <view class="box flex-row-center">
        <image
            style="margin-left: 20rpx"
            :src="$getImg('/img/common/search.png')"
            mode="widthFix"
            @click="confirm"
        />

        <view class="flex-1">
            <fui-input
                borderTop
                placeholder="搜索"
                :padding="[0, 0, 0, 0]"
                size="14px"
                v-bind="$attrs"
                @confirm="confirm"
                borderColor="#fff"
                v-model="value"
            ></fui-input>
        </view>
        <image
            :src="$getImg('/img/common/camera.png')"
            backgroundColor="transparent"
            mode="widthFix"
            style="width: 40rpx"
            @click="cameraFn"
            :style="{
                'margin-right': !showBtn && '20rpx'
            }"
            v-if="showCamera"
        />
        <view class="btn" v-if="showBtn" @click="confirm">搜索</view>
    </view>
</template>

<script lang="ts" setup>
const props = defineProps({
    showBtn: {
        type: Boolean,
        default: true
    },
    modelValue: {
        type: String,
        default: ''
    },
    showCamera: {
        type: Boolean,
        default: true
    }
})
//

const emit = defineEmits(['update:modelValue', 'confirm', 'camera'])
const cameraFn = () => {
    emit('camera')
}
const value = computed({
    get() {
        return props.modelValue
    },
    set(val: string) {
        emit('update:modelValue', val)
        console.log(val)
    }
})
const confirm = (e: Event) => {
    emit('confirm', e.detail as string)
}
</script>
<style lang="scss" scoped>
.box {
    padding: 6rpx;
    border: 1px solid #1d2129;
    border-radius: 999rpx;
    gap: 20rpx;
    background-color: #fff;
    height: 72rpx;
    image {
        width: 32rpx !important;
        height: 32rpx !important;
    }
    .btn {
        background: linear-gradient(90deg, #1890ff 0%, #0256ff 100%);
        padding: 12rpx 30rpx;
        border-radius: 999rpx;
        color: #fff;
    }
}
</style>
